{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import timebutton,searchtime,searchForm,searchFormBtn %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jquery_ui_css'
    '@datepicker_css'
    '@jqgird_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <h3 class="header smaller lighter green">录音备份管理:</h3>
    <p></p>
    <table class="table table-bordered table-hover no-padding">
        <tbody>
        <tr>
            <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                <label for="start_time">下载时间段:</label>
            </td>
            <td class="col-xs-10" style="border-left-width: 0px;">
                <div class="row" style="margin-right: 0">
                    <div class="col-sm-2">
                        <input type="text" class="col-sm-12" id="start_time" placeholder="" value="">
                    </div>
                    <div class="col-sm-1">
                        <span>________</span>
                    </div>
                    <div class="col-sm-2">
                        <input type="text" class="col-sm-12" id="end_time" placeholder="" value="">
                    </div>
                    <button onclick="search()" class="btn btn-info btn-sm">
                        <i class="ace-icon fa fa-search"></i> 查询
                    </button>
                    <button class="btn btn-pink btn-sm" onclick="resetBtn()">
                        <i class="ace-icon fa fa-undo"></i> 重 置
                    </button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
    <div class="row col-sm-12">
        <button class="btn btn-success btn-sm" onclick="newBackup()">
            <i class="ace-icon fa fa-cloud-download"></i> 新建备份
        </button>
        <strong>温馨提示:</strong>
        生成的下载地址30天内有效。
    </div>
    <div id="dialog-confirm" class="hide row form-horizontal page-content">
        <a href="#"></a>
        <div class="form-group">
            <label for="start_time2" class="col-sm-3 control-label">开始时间</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="start_time2" placeholder="" style="width: 300px">
            </div>
        </div>
        <div class="form-group">
            <label for="end_time2" class="col-sm-3 control-label">结束时间</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="end_time2" placeholder="" style="width: 300px">
            </div>
        </div>

    </div>
    <div id="dialog-confirm2" class="hide row form-horizontal page-content">
        <div class="row">
            <div class="alert alert-warning">
                <strong>提示:</strong>
                <br>建议使用迅雷下载。
            </div>
        </div>
        <div id="all_url" style="text-align: center"></div>
    </div>
{% endblock %}

{% block footer %}
    {% javascripts
    '@datepicker_js'
    '@jqgird_js'
    '@gritter_js'
    '@common_js'
    '@jquery_ui_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var startTime = '';
        var endTime = '';
        var startTime2,endTime2;
        var ids;
        var myDate = new Date();//获取系统当前时间
        myDate.setTime(myDate.getTime()-24*60*60*1000);
        var myYesday = myDate.getFullYear()+"-" + (myDate.getMonth()+1) + "-" + myDate.getDate();
        $(function () {
            $('#start_time').datetimepicker({
                locale: 'zh-cn',
                format: 'YYYY-MM-DD',
                widgetPositioning: {horizontal: 'left'}
            });
            $('#end_time').datetimepicker({
                locale: 'zh-cn',
                format: 'YYYY-MM-DD',
                widgetPositioning: {horizontal: 'left'}
            });
            $('#start_time2').datetimepicker({
                locale: 'zh-cn',
                format: 'YYYY-MM-DD',
                defaultDate:myYesday,
                maxDate:myYesday,
                widgetPositioning: {horizontal: 'left'}
            });
            $('#end_time2').datetimepicker({
                locale: 'zh-cn',
                format: 'YYYY-MM-DD',
                defaultDate:myYesday,
                maxDate:myYesday,
                widgetPositioning: {horizontal: 'left'}
            });
        });
        jQuery(function($) {
            {{ gridWidth() }}
            getCondition();
            jQuery(grid_selector).jqGrid({
                caption: "任务列表",
                url: "{{ path('icsoc_recording_record_backup_data') }}",
                mtype: 'POST',
                datatype: "json",
                hidegrid:false,
                height: '100%',
                colModel:[
                    {name:'record_date' , index:'record_date' , label: '日期' , width:100 , sortable:true , fixed:true},
                    {name:"staus_translation", index:'staus_translation', label: '完成进度' , width:100, sortable:false},
                    {name:'num' , index:'num' , label: '录音数量' , width:100 , sortable:true , fixed:true},
                    {name:'file_size' , index:'file_size' , label: '文件大小(KB)' , width:100 , sortable:true , fixed:true},
                    {name:'expire_time' , index:'expire_time' , label: '过期时间' , width:100 , sortable:true , fixed:true},
                    {name:'submit_time' , index:'submit_time', formatter:'date', formatoptions:{srcformat: 'U', newformat:'Y-m-d H:i:s'}, label: '提交时间' , width:80 , sortable:false },
                    {name:'handle_start_time' , index:'handle_start_time', formatter:'date', formatoptions:{srcformat: 'U', newformat:'Y-m-d H:i:s'}, label: '开始处理时间' , width:80 , sortable:false },
                    {name:'handle_end_time' , index:'handle_end_time', formatter:'date', formatoptions:{srcformat: 'U', newformat:'Y-m-d H:i:s'}, label: '处理结束时间' , width:80 , sortable:false },
                    {name:"id", index:'id', title : false, formatter : actFormatter, label: '操作' , width:80, sortable:false},
                    {name:'id' , index:'id' , hidden : true },
                    {name:'download_url' , index:'download_url', hidden : true },
                    {name:"staus", index:'staus', hidden : true }
                ],
                {{ gridConfig() }}
                rowNum:10,
                rowList: [10,20,30,50,100],
                rownumWidth: 40,
                viewrecords: true,
                sortname:"id",
                sortorder:'desc',
                altRows: true,
                multiselect: true,
                rownumbers: true,
                beforeRequest: function() {

                },
                gridComplete:function(data){

                }
            });
            {{ gridNav(false,false,false,false,true) }}
            var jqnav = jQuery(grid_selector).jqGrid('navGrid',pager_selector,'');
            jqnav.navButtonAdd(pager_selector, {
                caption: "",
                title:"批量下载",
                buttonicon: "ace-icon fa fa-download blue",
                onClickButton: function () {
                    $('#all_url').empty();
                    $( "#dialog-confirm2" ).removeClass('hide').dialog({
                        resizable: false,
                        title:"批量下载",
                        height:430,
                        width:750,
                        modal: true
                    });
                    ids=$("#grid-table").jqGrid("getGridParam","selarrrow");
                    for(var i=0;i<ids.length;i++) {
                        var rowData = $("#grid-table").jqGrid('getRowData',ids[i]);
                        $('#all_url').append("<p>"+rowData.download_url+"</p>");
                    }
                },
                position: "last"
            });
            function actFormatter(cellvalue, options, rawObject) {
                var dis = '';
                if(rawObject.download_url == '' || rawObject.staus != 3){
                    dis = 'disabled="disabled';
                }
                var detail = '<button type="button" id="but'+rawObject.id+'" ' + dis + '" class="btn btn-white btn-pink btn-sm" onclick="showCustomDetail(\''
                        + rawObject.download_url +'\')">下载</button>';
                return "&nbsp;&nbsp;&nbsp;\t" + detail + "&nbsp;&nbsp;&nbsp;\t";
            }
        });

        //搜索
        function search()
        {
            getCondition();
            $('#grid-table').setGridParam({
                page:1,
                postData:{'startTime':startTime, 'endTime':endTime}
            }).trigger("reloadGrid");
        }

        //重置
        function resetBtn()
        {
            startTime = $('#start_time').val('');
            endTime = $('#end_time').val('');
            search();
        }
        //获得搜索条件
        function getCondition()
        {
            startTime = $('#start_time').val();
            endTime = $('#end_time').val();
        }
        //获得备份时间
        function getBackupTime()
        {
            startTime2 = $('#start_time2').val();
            endTime2 = $('#end_time2').val();
        }
        //比较两个时间大小
        function compareTime(date1,date2){
            var oDate1 = new Date(date1);
            var oDate2 = new Date(date2);
            if(oDate1.getTime() > oDate2.getTime()){
                return false;
            }else{
                return true;
            }
        }

        function newBackup(){
            $( "#dialog-confirm" ).removeClass('hide').dialog({
                resizable: false,
                title:"选择备份时间",
                height:440,
                width:470,
                modal: true,
                buttons: {
                    "提交": function() {
                        getBackupTime();
                        if (endTime2 > myYesday) {
                            gritterAlert('提示', '不能备份当天及之后的录音', 'error');
                            return;
                        }
                        if(compareTime(startTime2,endTime2)){
                            $.ajax({
                                url: "{{ path('icsoc_recording_record_backup_creat') }}",
                                dataType: 'json',
                                data: {'startTime': startTime2,'endTime':endTime2},
                                type: 'post',
                                success: function (e) {
                                    if (e.code == 200) {
                                        gritterAlert('提示', e.message, 'success');
                                        $( "#dialog-confirm" ).dialog( "close" );
                                        search();
                                    } else {
                                        gritterAlert('提示', e.message, 'error');
                                    }
                                }
                            });

                        }else{
                            gritterAlert('提示', '开始时间应该小于结束时间', 'error');
                        }
                    },
                    "取消": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
            $('.ui-dialog-buttonset button:first-child').removeClass('ui-state-default').addClass('btn-success');
            $('.ui-dialog-buttonset button:last-child').removeClass('ui-state-default').addClass('btn-danger');
        }

        function showCustomDetail(url){
            window.location.href=url;
        }
    </script>
{% endblock %}